<template>
  <div id="ywxq">
    <!-- tit -->
    <div class="tit">
      <h2>业务需求</h2>
      <div class="empty-box"></div>
      <p>一诺万金、关注用户需求、解决用户痛点，打造立体化的智慧安防社区</p>
    </div>
    <!-- con -->
    <div class="con">
      <div class="text-box">
        <div
          class="text-item"
          v-for="item in message"
          :key="item.mainTit"
        >
          <div class="text">
            <h2>{{ item.mainTit }}</h2>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img src="https://www.1nuoyun.com/uploadfile/2021/09/24/20210924160428nYjH8K.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Ywxq",
    data() {
      return {
        message: [
          {
            mainTit: "建立全面的基础档案信息",
            content: "基于小区标准地址，对采集汇聚的小区、房屋、人员、车辆、单位等不同要素进行归档和整合，并有机关联，实现一房一档，一车一档，一人一档，一事一档。"
          },
          {
            mainTit: "前端感知数据动态采集",
            content: "基于前端人行门禁机、车牌识别、监控摄像机等感知设备，动态采集人行、车行的动态信息，并上传到公安管控平台。"
          },
          {
            mainTit: "重点人群主动预警",
            content: "对接重点人、车信息库，自动识别并记录进入和离开社区的人车信息，主动提醒警务人员、网格人员、物业人员等。"
          },
          {
            mainTit: "多维数据研判分析",
            content: "基于全面的社区基础档案（人、车、房、事）等多维数据进行专题统计、碰撞分析、实现事前精准预测，辅助决策。"
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  // PC端
  #ywxq {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    };
    .con {
      padding: 4rem;
      background-color: #f5f5f5;
      position: relative;
      // 文字设置
      .text-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .text-item {
          // 一行两个
          width: 48.5%;
          // 统一高度
          height: 22rem;
          .text {
            width: 100%;
            height: 100%;
            background-color: #fff;
            margin-right: 4rem;
            padding: 4rem 6rem;
            box-shadow: 0 0 1rem #f5f5f5;
            h2 {
              font-size: 2.4rem;
              font-weight: 1000;
              margin-bottom: 1.6rem;
            };
            p {
              font-size: 1.6rem;
              text-align: justify;
            }
          };
        };
        // 1-2盒子加下外边距
        .text-item:nth-child(1),
        .text-item:nth-child(2) {
          margin-bottom: 3.6rem;
        };
        // 2-3盒子设置样式
        .text-item:nth-child(2),
        .text-item:nth-child(3) {
          .text {
            background-color: #0B47D8;
            h2 {
              color: #fff;
            };
            p {
              color: #fff;
            }
          }
        }
      };
      // 图片设置
      .img-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 16rem;
        }
      }
    };
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>